<template lang="html">
  <div class="popup" v-show="isWin"  ref="popupMask">
    <div class="mask" @click="hidePopup"></div>
    <div class="popup-warp">
      <div class="close-btn" @click="hidePopup">
        <span></span>
      </div>
      <div class="popup-main">
        <h1><span v-text="total">8888</span><label>元</label></h1>
        <input type="tel" placeholder="输入手机号领取" maxlength="11" ref="popupTel">
        <p class="what-jinr">鲸鱼宝红包是什么？</br>领取后存入您手机号码注册的鲸鱼宝账户中，</br>自动产生收益，收益可以提现。</p>
        <a href="javascript:;" @click="receiveHb">点击领取</a>
      </div>
    </div>
    <jrWarm :showWarn="showWarn" :warnInfo="warnInfo"></jrWarm>
  </div>
</template>

<script type="text/ecmascript-6">
  import JrUtils from '../common/js/JrUtils.js'
  import jrWarm from './JrWarn.vue'
  import qs from 'qs';
export default {
  props:{
    total:Number,
    isWin: {
      type: Boolean,
      default: false,
    },

  },

  data () {
    return {
      url: '/HunanLaohuji/appendhb',
      params: {},
      hb_key: '',
      host: '',
      telVal: '',
      showWarn: false,
      warnInfo: '',
    }
  },

  created () {
    // 调用事件接收
    this.$root.eventHub.$on('showWarnFu', (val) => {
      this.$nextTick(() => {
        this.showWarn = val
      });
    });
  },
  mounted () {
    // 禁止滚动穿透
    this.$refs.popupMask.addEventListener('touchmove', function(e) {
      e.preventDefault();
    }, false);
  },

  methods: {
    hidePopup: function () {
      this.$root.eventHub.$emit('isWarnFun', false);
    },
    // 立即验证
    receiveHb: function () {
      let telVal = this.$refs.popupTel.value

      var reg = /^[0-9]*$/;
      var regTel = /^1[3|4|5|7|8]\d{9}$/;

      if (telVal.length < 11) {
        this.warnInfo = '手机号码应为11位数'
        this.showWarn = true
        return false;

      } else if (!regTel.test(telVal)) {
        this.warnInfo = '手机号码格式有误'
        this.showWarn = true
        return false;

      }

      let val = this.getRequest()
      this.host = val['host']
      this.hb_key = val['hb_key']
      let params =  {
        hb_key: this.hb_key,
        tel: telVal,
        money: this.total
      }
//      params = JSON.parse(JSON.stringify(params))
      let url = this.initGetUrl(this.host)
      this.initHttp(url, params)
    },
    // 初始化请求数据
    initHttp:  function(url, params){

      this.$http.post(url, qs.stringify(params)).then((response) => {
        response = response.data;

        if(response.code == 10002){
          window.location.href = response.url

        }else if(response.code == 10001){
          this.warnInfo = response.data
          this.showWarn = true
        }
      });
    },
    // 获取url的参数
    getRequest: function() {
      let urlHou = window.location.search; //获取url中"?"符后的字串
      let theRequest = new Object();
      if (urlHou.indexOf("?") != -1) {
        let str = urlHou.substr(1);
        let strs = str.split("&");
        for(var i = 0; i < strs.length; i ++) {
          theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
        }
      }
      return theRequest;
    },
    //
    initGetUrl: function(host){
      // hbjr.jinrgame.com
      return 'http://'+host+this.url
    },

  },

  components: {
    jrWarm,
  }

}
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import '../common/style/base.styl'

.popup
  position fixed
  top 0
  left 0
  height 100%
  width 100%
  .mask
    position fixed
    top 0
    left 0
    height 100%
    width 100%
    background-color rgba(7,17,27,0.8)
  .popup-warp
    position relative
    z-index 888
    width rem(710)
    height rem(524)
    margin rem(114) auto
    background url("../assets/popup.png") no-repeat center
    background-size rem(710) rem(524)
    .popup-close
      position absolute
    .popup-main
      text-align center
      h1
        padding-top rem(116)
        margin-bottom rem(180)
        font-size rem(48)
        color  #ec4d35
        span
          padding-left rem(10)
          line-height rem(122)
          font-weight bold
          vertical-align middle
          font-size rem(72)
        label
          vertical-align middle
          line-height rem(80)
      input
        text-align center
        width rem(465)
        margin 0 auto
        padding-top rem(10)
        font-size rem(34)
        height rem(80)
        line-height rem(80)
        background-color transparent
      input::-webkit-input-placeholder
        font-size rem(32)
        color #d97c00
      p.what-jinr
        padding rem(40) 0 rem(32)
        text-align center
        line-height rem(50)
        font-size rem(28)
        color #fcc707
      a
        display inline-block
        width rem(296)
        height rem(72)
        line-height rem(72)
        border rem(6) #ffd864 solid
        border-radius rem(36)
        font-size rem(36)
        background-color #f15d35
        color #ffea97
        -webkit-box-shadow:0 -0.05rem 0px #e0b217;
        box-shadow:0 -0.05rem 0px #e0b217;

  .close-btn
    float right
    padding .2rem
    margin 0.1rem
    border-radius 50%
    background-color rgba(0, 0, 0, 0.2)
    span
      display block
      position relative
      width .4rem
      height .4rem
      padding 0.1rem
      &:before,&:after
        content: '';
        position: absolute;
        height: .08rem;
        width: 100%;
        top: 50%;
        left: 0;
        margin-top: -.04rem;
        border-radius .01rem
        background: #ffffff;
      &:before
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
      &:after
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
</style>
